<template>
  <el-dialog
    v-model="showDia"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
  >
    <el-form
      :model="formValue"
      ref="formRef"
      :rules="rules"
      label-width="200px"
    >
      <el-form-item label="表单名：" prop="name">
        <el-input v-model="formValue.name" />
      </el-form-item>
      <el-form-item label="表单描述：" prop="description">
        <el-input type="textarea" rows="4" v-model="formValue.description" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script lang="ts" setup>
import { defineProps, nextTick, reactive, ref } from "vue";
import { FormInstance, FormRules } from "element-plus";
import { getRouteParams } from "@bis/utils/utils";
import { useFormStore } from "@bis/stores/form";
import FormRequest from "@bis/requests/form";
import FormResponse from "@bis/interface/form";
import { ElMessage } from "element-plus";

const formStore = useFormStore();

const props = defineProps({
  formType: {
    type: String,
    default: "add",
  },
  id: Number,
});
const emit = defineEmits<{
  (e: "addSuccess"): void;
  (e: "editSuccess"): void;
}>();

const params = getRouteParams();
const { formDepotId, platformId } = params;
const showDia = ref<boolean>(false);
const formValue = reactive({
  name: "",
  description: "",
});
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: "请填写表单仓库名",
      trigger: "change",
    },
  ],
  description: [],
});

const showDiaFunc = () => {
  showDia.value = true;
  formValue.description = "";
  formValue.name = "";
  nextTick(() => {
    props.formType === "edit" && getInfo();
  });
};
const closeDiaFunc = () => {
  showDia.value = false;
};

let isRequesting = false;
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (!isRequesting) {
        isRequesting = true;
        switch (props.formType) {
          case "add":
            await add();
            break;
          case "edit":
            await edit();
            break;
          default:
            break;
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const add = async () => {
  const res: FormResponse = await FormRequest.addForm({
    platformId,
    formDepotId,
    ...formValue,
  });
  isRequesting = false;
  if (res.code === 200) {
    //  提示成功
    emit("addSuccess");
    ElMessage.success("添加成功");
    closeDiaFunc();
  } else {
    ElMessage.error(res.message);
  }
};

const edit = async () => {
  const res: FormResponse = await FormRequest.editForm({
    platformId,
    id: props.id,
    ...formValue,
  });
  isRequesting = false;
  if (res.code === 200) {
    //  提示成功
    emit("editSuccess");
    ElMessage.success("修改成功");
    if (props.id === formStore.formConfig.id) {
      formStore.formConfig.name = formValue.name;
      formStore.formConfig.description = formValue.description;
    }
    closeDiaFunc();
  } else {
    ElMessage.error(res.message);
  }
};

const getInfo = async () => {
  const res: FormResponse = await FormRequest.getForm({
    platformId,
    id: props.id,
  });
  if (res.code === 200) {
    formValue.description = res.data.form.description;
    formValue.name = res.data.form.name;
  }
};

defineExpose({
  showDiaFunc,
});
</script>
